import { createDiscreteApi } from 'naive-ui'

export default defineNuxtPlugin(nuxtApp => {
  const bar = ref(null)
  nuxtApp.hook('app:mounted', e => {
    if (!bar.value) {
      const { loadingBar } = createDiscreteApi(['loadingBar'], {
        loadingBarProviderProps: {
          containerStyle: { background: '#0A87F8' },
          containerClass: 'loading-class'
        }
      })
      bar.value = loadingBar
    }
  })
  nuxtApp.hook('page:start', e => {
    bar.value?.start()
  })
  nuxtApp.hook('page:finish', e => {
    bar.value?.finish()
  })
  nuxtApp.hook('app:error', e => {
    if (process.client) {
      setTimeout(() => {
        bar.value?.finish()
      }, 150)
    }
  })
})
